<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>欢迎来到我们的小破站</title>
  <!--title 网站的标题，显示的浏览器标签上的-->
</head>
<body>
<h1>
  登录我们的网站
</h1>
<hr>
<div>
  <label>
    账号:
    <input type="text" placeholder="请输入用户名">
    <!--placeholder 放输入框的提示字符-->
  </label>
</div>
<!--form表单开始-->
<form>
  <div>
    <label>密码:
      <input type = "password" placeholder="请输入密码">
    </label>
    <br>
  </div>
  <div>
    <input type="submit" value="登录">
    <!--        submit type 会把和它同一个form表单包裹的input标签的值提取出来，作为post请求提交到给定的后台地址-->
  </div>
  <br>
  <a href="https://www.baidu.com">忘记密码</a>
  <br>
  <br>

</form>
<!--form表单结束-->

<div>
  <label>选择颜色
    <input type = "color">
  </label>
  <!--    颜色选择器-->
</div>

<div>
  <label>上传文件
    <input type = "file">
  </label>
  <!--    上传文件的功能，文件选择器-->
</div>


<!--通过input实现提交按钮-->
<!--第一种input submit用的更多，他会把和它同一个form表单包裹的input标签的值提取出来，作为post请求提交到给定的后台地址-->
<input type="submit" value="input submit按钮登录">
<input type="button" value="input button登录">
<!--直接使用button的方式，用的少-->
<button>我是button按钮</button>

<div>
  这是我们的文本框<br>
  <textarea placeholder="请在文本框中输入内容" cols="10" rows="10"></textarea>
  <!--    input标签只能输入单行文本，不能换行，按enter就自动提交去了，textarea 可以输入多行文本，可以指定初始显示的行数和列数（不是针对用户输入的限制），用户可以随意拖动文本框大小-->
</div>

<div>
  <input type="checkbox"> 我同意本网站的隐私协议
  <!--    使用checkbox type制作多选框-->
</div>

<div>
  <label>
    <input type="radio" name="role"> 学生
  </label>
  <label>
    <input type="radio" name="role"> 老师
  </label>
  <!--    使用radio制作单选框，name相同的为一组绑定的互斥单选框，不是同一个组的单选框不会互斥-->
</div>
<div>
  登录身份
  <select>
    <option>学生</option>
    <option selected>教师</option>
  </select>
  <!--    使用<select>标签和内部的<option>标签制作下拉框。如果想默认定位到某个下拉选项，可以在<option>里增加selected标记 -->
</div>

</body>
</html>
<!--HTML元素远不止这些，更多的自学-->

